import React, { Component } from "react";

class App extends Component {
  state = {
    count: 5,
    name: "zhangsan",
  };

  handleClick() {
    // 如果希望这个数据有响应式，必须要使用setState的方法
    // setState有两个参数，第一个参数是对象，第二个参数是回调函数，这个函数是在数据改变以后再执行
    // this.setState(
    //   {
    //     count: 10,
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );
    // setState有第二种写法，第一个参数还可以是函数, 可以接受一个参数是prevState
    // 如果要改变的值是不依赖前一次的值的时候，使用对象更加方便
    // 如果需要依赖前一次的值，使用函数更加安全
    // this.setState(
    //   (prevState) => {
    //     return {
    //       count: prevState.count + 1,
    //     };
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );
    // this.setState((prevState) => ({
    //   count: prevState.count + 1,
    // }));
    // setState是同步还是异步
    // 17版本及以前
    // 1. setState在合成事件里面是异步的
    // 2. setState在生命周期里面是异步的
    // 3. setState在定时器里面是同步的
    // 4. setState在原生js里面是同步的
    // 18版本，就一律是异步的了
  }

  render() {
    return (
      <>
        <h2>setState改变state</h2>
        <p>count: {this.state.count}</p>
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button>btn</button>
      </>
    );
  }

  componentDidMount() {
    // setTimeout(() => {
    //   this.setState({
    //     count: 10,
    //   });
    //   console.log(this.state.count);
    // }, 3000);

    document.querySelector("button").addEventListener("click", () => {
      this.setState({
        count: 10,
      });
      console.log(this.state.count);
    });
  }
}

export default App;
